<script setup>

import { ref, reactive, toRefs, onMounted, watch, nextTick } from 'vue'
import request from "@/common/utils/request";
import { message } from "ant-design-vue";
import dayjs from "dayjs";
const emit = defineEmits(['rePublishOver'])

const state = reactive({
    // 开关
    reReleaseVisible: false,
    // 重新发布表单
    reReleaseForm: {
        reReleaseType: 1,
        releaseTime: "",
    },
    // 重新发布表单校验
    reReleaseRules: {
        reReleaseType: [
            {
                required: true,
                message: "请选择发布类型",
                trigger: "change",
            },
        ],
        releaseTime: [
            {
                required: true,
                trigger: "change",
                validator: (rule, value) => {
                    console.log(value);
                    if (!value) {
                        return Promise.reject("请选择发布时间");
                    }
                    if (value && value.length >= 2) {
                        const [startTime, endTime] = value;
                        const duration = dayjs(endTime).diff(
                            dayjs(startTime),
                            "minute"
                        );
                        if (duration < 5) {
                            return Promise.reject("开始时间和结束时间不能小于5分钟");
                        }
                    }
                    return Promise.resolve();
                },
            },
        ],
    },
    rePublishId: null, //重新发布的id
    reReleaseLoading: false,
})
//重新发布表单实例
const reReleaseRef = ref(null)

// 禁用日期
const disabledDate = (current) => {
    // 禁用今天的当前时间之后半个小时之前的时间
    const thirtyMinutesAgo = dayjs().subtract(30, "minute");
    return current && current < thirtyMinutesAgo;
};
// 禁用时间
const disabledDateTime = (current) => {
    const now = dayjs();
    const isToday = current && current.isSame(now, "day");

    if (!isToday) return {};

    const thirtyMinutesLater = now.add(30, "minute");
    const thirtyMinutesLaterHour = thirtyMinutesLater.hour();
    const thirtyMinutesLaterMinute = thirtyMinutesLater.minute();

    return {
        disabledHours: () => {
            return Array.from({ length: 24 }, (_, i) => i).filter(
                (hour) => hour < thirtyMinutesLaterHour
            );
        },
        disabledMinutes: (selectedHour) => {
            if (selectedHour === thirtyMinutesLaterHour) {
                return Array.from({ length: 60 }, (_, i) => i).filter(
                    (minute) => minute < thirtyMinutesLaterMinute
                );
            }
            return [];
        },
    };
};
// 重置重新发布表单
const initReleaseForm = () => {
    state.reReleaseVisible = false;
    reReleaseRef.value && reReleaseRef.value.resetFields();
    state.reReleaseForm.releaseTime = "";
    state.rePublishId = null;
};
// 关闭重新发布弹窗
const reReleaseClose = () => {
    initReleaseForm();
};
// 重新发布
const reReleaseSubmit = () => {
    console.log(state.reReleaseForm);
    reReleaseRef.value &&
        reReleaseRef.value
            .validate()
            .then((res) => {
                const params = {
                    release_type: state.reReleaseForm.reReleaseType,
                    mid: state.rePublishId,
                };
                if (state.reReleaseForm.reReleaseType == 2) {
                    params.start_time = dayjs(
                        state.reReleaseForm.releaseTime[0]
                    ).format("YYYY-MM-DD HH:mm");
                    params.end_time = dayjs(
                        state.reReleaseForm.releaseTime[1]
                    ).format("YYYY-MM-DD HH:mm");
                }
                state.reReleaseLoading = true;
                request
                    .put("/work_ai", "/user/filmrelease/rePublish", params)
                    .then((successRes) => {
                        console.log(successRes);
                        if (successRes && successRes.result) {
                            message.success("设置成功");
                            initReleaseForm();
                            emit('rePublishOver')
                        }
                        state.reReleaseLoading = false;
                    })
                    .catch((errorRes) => {
                        state.reReleaseLoading = false;
                    });
            })
            .catch((err) => {
                console.log(err);
            });
};


// 开关
const controls = {
    open(rePublishId) {
        state.rePublishId = rePublishId
        state.reReleaseVisible = true
    },
    close(){
        state.reReleaseVisible = false
    }
}

defineExpose({
    controls
})

</script>

<template>
    <!-- 重新发布弹窗 -->
    <a-modal v-model:visible="state.reReleaseVisible" title="重新发布" centered @cancel="reReleaseClose">
        <a-alert message="重新发布之前，请您先确认该账号是否在线。" type="warning" show-icon
            style="margin: 0 0 10px 0; padding: 8px 2px !important" />
        <a-form :model="state.reReleaseForm" :rules="state.reReleaseRules" layout="inline" ref="reReleaseRef">
            <a-form-item name="reReleaseType" label="发布方式" :rules="state.reReleaseRules.reReleaseType">
                <a-radio-group v-model:value="state.reReleaseForm.reReleaseType">
                    <a-radio :value="1">立即发布</a-radio>
                    <a-radio :value="2">选择时间</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item style="margin-top: 10px" label="发布时间" name="releaseTime" :rules="state.reReleaseRules.releaseTime"
                v-if="state.reReleaseForm.reReleaseType == '2'">
                <a-range-picker :disabled-date="disabledDate" :disabled-time="disabledDateTime" style="width: 320px"
                    format="YYYY/MM/DD HH:mm" v-model:value="state.reReleaseForm.releaseTime"
                    :show-time="{ hideDisabledOptions: true }" />
            </a-form-item>
        </a-form>
        <template #footer>
            <a-space>
                <a-button @click="reReleaseClose">关闭</a-button>
                <a-button type="primary" @click="reReleaseSubmit" :loading="state.reReleaseLoading">确定</a-button>
            </a-space>
        </template>
    </a-modal>
</template>



<style lang="less" scoped>

</style>